<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04组件的嵌套</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    const student = {
      template: `
        <div>
          <h2>学生</h2>
          <h3>{{studentName}}</h3>
          <h3>{{age}}</h3>
        </div>
      `,
      data() {
        return {
          studentName: 'lqj',
          age: 18
        }
      }
    }
    const school = Vue.extend({
      template: `
        <div>
          <h1>学校</h1>
          <h3>{{schoolName}}</h3>
          <h3>{{addr}}</h3>
          <student></student>
        </div>
      `,
      data() {
        return {
          schoolName: '清华',
          addr: '北京'
        }
      },
      components: {
        student
      }
    })
    const home = {
      template: `
        <div>
          <h1>省</h1>
          <h3>{{homeName}}</h3>
          <h3>{{cap}}</h3>
        </div>
      `,
      data() {
        return {
          homeName: '江西',
          cap: '南昌'
        }
      }
    }
    const app = {
      template: `
        <div>
          <school></school>
          <home></home>
        </div>
      `,
      components: {
        school,
        home
      }
    }
    new Vue({
      el: '#app',
      template: `<app></app>`,
      components: {
        app
      }
    })
  </script>
</body>
</html>